<template>
  <div class="big_box">
    <div class="header_search">
      <span class="iconfont icon-direction-left"></span>
      <div class="J_searchForm">
        <i class="iconfont icon-search"></i>
        <input type="text" class="search_input" placeholder="碎屏服务保" @input="showEdit" v-model="disabled"/>
        <i class="iconfont icon-close"  v-show="hideIconfont" @click="Lossfocus"></i>
      </div>
      <span class="search_word">搜索</span>
    </div>

    <div class="over" v-show="hideEdit">
      <ul>
        <li class="misted" v-for="mislist in mistedlist" :key="mislist.id">
          <span>{{mislist.mistedname}}</span>
          <div class="text_type">
            <i class="type_i">{{mislist.mistedtype1}}</i>
            <i class="type_i">{{mislist.mistedtype2}}</i>
            <i class="type_i">{{mislist.mistedtype3}}</i>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "SearchHeader",
  data() {
    return {
      hideEdit: false,
      hideIconfont:false,
      disabled:"",
      mistedlist: [
        {
          mistedname: "手环7",
          mistedtype1: "nfc",
          mistedtype2: "pro",
          mistedtype3: "表带",
        },
        {
          mistedname: "手环7",
          mistedtype1: "nfc",
          mistedtype2: "pro",
          mistedtype3: "表带",
        },
        {
          mistedname: "手环7",
          mistedtype1: "nfc",
          mistedtype2: "pro",
          mistedtype3: "表带",
        },
        {
          mistedname: "手环7",
          mistedtype1: "nfc",
          mistedtype2: "pro",
          mistedtype3: "表带",
        },
        {
          mistedname: "手环7",
          mistedtype1: "nfc",
          mistedtype2: "pro",
          mistedtype3: "表带",
        },
        {
          mistedname: "手环7",
          mistedtype1: "nfc",
          mistedtype2: "pro",
          mistedtype3: "表带",
        },
      ],
    };
  },
  methods: {
    showEdit() {
      this.hideEdit = true;
      this.hideIconfont=true
    },
    Lossfocus(){
      this.hideEdit=false;
      this.disabled=" "
    }
  },
};
</script>

<style scoped>
@import url("@/assets/xiaxia/xiaxia/iconfont/iconfont.css");
.header_search {
  height: 0.56rem;
  width: 100%;
  display: flex;
  align-content: center;
  line-height: 0.56rem;
}
.J_searchForm {
  height: 0.4rem;
  width: 2.6rem;
  background-color: #fff;
  border-radius: 0.2rem;
  margin: 0.08rem 0.15rem;
  padding: 0 0.1rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  color: #999999;
}
.icon-direction-left {
  font-size: 24px;
  color: #3c3d3d;
  margin-left: 0.15rem;
}
.search_word {
  font-weight: 600;
  font-size: 0.14rem;
}
.icon-search {
  font-size: 0.18rem;
  margin: 0 0.1rem;
}
.search_input {
  display: inline-block;
  height: 100%;
  width: 1.9rem;
  font-size: 16px;
  box-sizing: border-box;
  outline: none;
  border: 0;
}


.big_box {
  position: relative;
}
.over {
  width: 100%;
  position: absolute;
  top: .6rem;
  /* left: .15rem; */
  z-index: 100;
  background-color: #f1f3f5;
  border: 1px solid #e3e3e4;
}
.over > ul {
  width: 3.4rem;
  
  margin: auto;
}
.over > ul > li {
  height: 48px;
  /* width: 100%; */
  /* margin: 0 .15rem; */
  /* background-color: aquamarine; */
  display: flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: space-between;
  padding: 0 0.1rem;
}
.type_i {
  background-color: #e5e7e9;
  padding: 0.05rem 0.07rem;
  font-size: 0.12rem;
  margin: 0 0.05rem;
  border-radius: 0.1rem;
}
.icon-close {
margin-right: .1rem;
}
</style>